<script lang="ts" setup>
import { toRefs, reactive } from 'vue'
import { IComponentItem, IFormData } from '../interface/IComponentItem'
// import { guid } from '../../../utils/util'

interface Props {
    // componentData?: IComponentItem[]
    formData?: IFormData
}
interface Emit {
  (e: 'changeComponents', item: IComponentItem): void
  (e: 'changeComponents2', item: IComponentItem): void
}
const emit = defineEmits<Emit>()
const props = defineProps<Props>()
// const { componentData } = toRefs(props)
const componentData: IComponentItem[] = reactive([
    {
        label: '商品组件',
        type: 'xm-goods',
        formData: {
            pageName: '商品组件'
        }
    },
    {
        label: '图片组件',
        type: 'xm-image',
        formData: {
            pageName: '图片组件'
        }
    },
    {
        label: '优惠券组件',
        type: 'xm-coupon',
        formData: {
            pageName: '优惠券组件'
        }
    },
    {
        label: 'tab组件',
        type: 'xm-tabs',
        formData: {
            pageName: 'tab组件',
        }
    }
])
// const addComponent = (item: IComponentItem) => {
//     emit('changeComponents', {
//         ...item,
//         id: guid()
//     })
// }
const addComponent2 = (item: IComponentItem) => {
    emit('changeComponents2', item)
}

</script>
<template>
    <div>
        <h4>组件列表</h4>
        <div v-for="item in componentData" :key="item.id" @click="addComponent2(item)">{{ item.label }}</div>
    </div>
</template>